import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:loxen/mode/inspiration/sub_category.dart';
import 'package:loxen/viewmode/study_index_viewmodel.dart';
import 'package:provider/provider.dart';


class StudyTabBar extends StatefulWidget {

  @override
  _StudyTabBar createState() => _StudyTabBar();
}

class _StudyTabBar extends State<StudyTabBar> with TickerProviderStateMixin {
  TabController controller;
  var tabs = <Tab>[
    Tab(
      text: '知识',
    ),
    Tab(
      text: '应用',
    ),
  ];

  @override
  void initState() {
    controller = TabController(length: 2, vsync: this);
    controller.addListener(() {
      Provider.of<StudyViewModel>(context, listen: false)
          .changeCategory(controller.index);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    controller.index =
        Provider.of<StudyViewModel>(context, listen: false).currentCategory;
    return TabBar(
        controller: controller,
        isScrollable: true,
        indicator: const BoxDecoration(),
        labelPadding: EdgeInsets.only(right: 20.w, left: 20.w),
        labelColor: Colors.white,
        labelStyle: TextStyle(
          fontSize: 34.sp,
          fontWeight: FontWeight.bold,
        ),
        unselectedLabelStyle: TextStyle(fontSize: 31.sp, color: Colors.white),
        tabs: tabs);
  }
}

class StudyTabBar2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Selector<StudyViewModel, List<SubCategory>>(
        builder: (_, value, __) {
          return Container(
            height: 40.h,
            width: double.infinity,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: value.length,
                itemBuilder: (context, index) {
                  return Selector<StudyViewModel, int>(
                      builder: (_, currentIndex, __) {
                        bool select = index == currentIndex;
                        return GestureDetector(
                          onTap: () {
                            Provider.of<StudyViewModel>(context,
                                listen: false)
                                .changeCategoryId(index);
                          },
                          child: Container(
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(4),
                                border: Border.all(
                                    color: select
                                        ? Color(0xFF0CABCB)
                                        : Color(0xFF999999),
                                    width: 0.5),
                              ),
                              margin: EdgeInsets.only(right: 26.w),
                              padding:
                              EdgeInsets.only(right: 16.w, left: 16.w),
                              alignment: Alignment.center,
                              child: Text(
                                value[index].name,
                                style: TextStyle(
                                  color: select
                                      ? Color(0xFF0CABCB)
                                      : Color(0xFF999999),
                                  fontSize: 23.sp,
                                  fontWeight: FontWeight.w500,
                                  height: 1,
                                ),
                              )),
                        );
                      },
                      selector: (_, model) => model.currentCategoryId,
                      shouldRebuild: (old, next) {
                        return (old == index || next == index);
                      });
                }),
          );
        },
        selector: (_, model) =>
            model.subCategoryBean[model.currentCategory].data.results);
  }
}
